<!DOCTYPE html>
<html>
  <head>
    <title> Document </title>
  </head>
  <body>
     
      <div class="card">
        <img src="cover1.jpg" class="cover" />
        <img src="title1.png" class="title" />
        <img src="hero1.png" class="hero" />
      </div>
      <div class="card">
        <img src="cover2.jpg" class="cover" />
        <img src="title2.png" class="title" />
        <img src="hero2.png" class="hero" />
      </div>
   
  </body>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body{
      width: 100vh;
      height: 100vh;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
    }
    .card{
      width: 200px;
      height: 300px;
      margin: 0 50px;
      transform: translateY(-50%);
      /* 设置定位类型为相对定位 */
      position: relative;
    }
    .card img{
      width: 100%;
      /* img元素在card元素中为绝对定位,使得图片重叠在一起*/
      position: absolute;
       /* 设置元素状态转换过度时间，消除转化过程中的卡顿感 */
      transition: 0.5s;
    }
    .card .cover{
      /* 将cover元素设置在最底层*/
      z-index: 1;
    }
    .card:hover .cover{
      box-shadow: 0 35px 35px -8px rgba(0,0,0,0.75);
      /* perspective(500px) 设置平面和用户眼睛之间的距离*/
      /* rotateX(25deg) 鼠标移入card元素时将其中的cover元素绕x轴旋转25°*/
      transform: perspective(500px) rotateX(25deg);
    }
    .card .hero{
      /* 将cover元素设置在中间层*/
      z-index: 2;
      /* 开始不可见*/
      opacity: 0;
    }
    .card:hover .hero{
      opacity: 1;
      /* perspective(500px) 设置平面和用户眼睛之间的距离*/
      /* translate3d 设置hero元素的xyz值*/
      transform: perspective(500px) translate3d(0,-50px,50px);
    }
    .card .title{
      /* 将title元素设置在最上层*/
      z-index: 3;
    }
    .card:hover .title{
      /* perspective(500px) 设置平面和用户眼睛之间的距离*/
      /* translate3d 设置title元素的xyz值*/
      transform: perspective(500px) translate3d(0,-25px,50px);
    }
  </style>
</html>
